<template>
  <div>
    <el-table
      :data="lists"
      style="width: 100%;"
    >
      <el-table-column
        label="序号"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="项目名称"
        align="center"
        width="180"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="github链接"
        align="center"
        width="200"
      >
        <template slot-scope="scope">
          <a style="margin-left: 10px" class="a-link" @click.prevent="tmep(scope.row.github)">{{ scope.row.github }}</a>
        </template>
      </el-table-column>
      <el-table-column
        label="gitee链接"
        align="center"
        width="200"
      >
        <template slot-scope="scope">
          <a class="a-link" style="margin-left: 10px" @click.prevent="tmep(scope.row.gitee)">{{ scope.row.gitee }}</a>
        </template>
      </el-table-column>
      <el-table-column
        label="项目链接"
        align="center"
        width="200"
      >
        <template slot-scope="scope">
          <a class="a-link" style="margin-left: 10px" @click.prevent="tmep(scope.row.Url)">{{ scope.row.Url }}</a>
        </template>
      </el-table-column>
      <el-table-column
        label="编写语言"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.language }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        align="center"
        width="150"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ dayTime(scope.row.createdAt) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="up(scope.row)" />
          <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row._id,scope.$index)" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { apiProject, apiDelProject } from '@/routerConfig'
import { get_requset, Post_requset } from '@/api/publicRequest'
import { Message } from 'element-ui'
import { Time } from '@/utils/useDate'
export default {
  data() {
    return {
      lists: []
    }
  },
  async beforeCreate() {
    const { data } = await get_requset(apiProject)
    this.lists.push(...(data.row))
  },
  methods: {
    up(row) {
      this.$router.push({
        name: 'addProject',
        query: row
      })
    },
    async del(_id, index) {
      const { data } = await Post_requset(apiDelProject, { _id })
      if (data === true) {
        Message.success('删除成功')
        this.lists.splice(index, 1)
      } else {
        Message.error('删除失败')
      }
    },
    dayTime(date) {
      return Time(date)
    },
    tmep(http) {
      window.open(http, '_blank', '', true)
    }
  }
}
</script>

<style  scoped>
.a-link:hover{
  color: blue;
}
</style>
